import React, { useState, useRef, useEffect } from 'react';
import { Card, Col, Row, Statistic, Space, Tag, Tabs,Descriptions, Divider } from 'antd';
// import { ReloadOutlined } from '@ant-design/icons';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { MyContent } from '@/components/MyUI';
import * as api from '@/services/report';
import * as utils from '@/utils/utils';
import {
  LightFilter,
  ProFormDatePicker,
  ProFormInstance,
} from '@ant-design/pro-form';
import moment from 'moment';
import { useModel } from 'umi';
import { CaretDownOutlined, CaretUpOutlined, ReloadOutlined } from '@ant-design/icons';
import Countdown from 'antd/lib/statistic/Countdown';
import ProCard from '@ant-design/pro-card';
import TabPane from 'antd/lib/tabs/TabPane';
import LineChart from '@/components/LineChart';

// const renderBadge = (count: number, total?: number, active = false) => {
//   let display = total ? `${count}/${total}` : count;
//   return (
//     <Badge
//       count={display}
//       overflowCount={9999}
//       showZero
//       style={{
//         marginTop: -4,
//         marginLeft: 2,
//         color: active ? '#1890FF' : '#999',
//         backgroundColor: active ? '#E6F7FF' : '#eee',
//       }}
//     />
//   );
// };

const List: React.FC = () => {
  const { hasRight } = useModel('useAuthModel');
  if (!hasRight('report_userstat')) {
    return <></>;
  }

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();


  const [countdownTicks, setCountdownTicks] = useState<number>(Date.now() + 60000,);


  const [data, setData] = useState<API.ActiveStatList | undefined>(undefined);
  const [preTodayRegistCount, setPreTodayRegistCount] = useState<number | undefined>(undefined);
  const [activeGenre, setActiveGenre] = useState<string | undefined>('tot');
  const [statDay, setStatDay] = useState<string | undefined>(moment(new Date()).format('yyyy-MM-DD'));
  const [statType, setStatType] = useState<string | undefined>('1');  
  const [myLoading, setMyLoading] = useState<boolean | undefined>(false);


  const reload = () => {
    loadData(
      {genre: activeGenre,
      statDay: statDay,
      statType: statType,}
      );
    // actionRef.current?.reload();
    setCountdownTicks(Date.now() + 60000);
  };

  const loadData = async (params:any) => {
    const result = await api.activeStat(params, undefined, undefined);
    if (result && result.success) {
      // setAddTodayRegistCount((ret.todayRegistCount ?? 0) - (data?.todayRegistCount ?? 0));
      console.log("bbbb", (data?.todayRegistCount ?? 0), (result.todayRegistCount ?? 0));
      setPreTodayRegistCount(data?.todayRegistCount);
      setData(result);
      setMyLoading(false);
    }
  };
  
  const loadDataDo = async (params:any) => {
    const result = await api.activeStat(params, undefined, undefined);

    // console.log("bbb");
    // if (result && result.success) {
    //   // setPreTodayRegistCount(data?.todayRegistCount);
    //   setAddTodayRegistCount((result.todayRegistCount ?? 0) - (data?.todayRegistCount ?? 0));
    //   setData(result);
    // }

    // setMyLoading(false);
    return Promise.resolve(result);
  };


  useEffect(() => {
    console.log("aaaa");
    setMyLoading(true);
    loadData(
      {genre: activeGenre,
      statDay: statDay,
      statType: statType,}
      );    
  }, []);

  const getMinuteAddText = () => {
    console.log("cccc", (data?.todayRegistCount ?? 0), preTodayRegistCount);
    if (data == undefined || preTodayRegistCount == undefined) {
      // setPreTodayRegistCount(data?.todayRegistCount);
      return ``;
    }
    let ret = (
      <>
        <div style={{ fontSize: 14, color: 'gray' }}>
          +{utils.formatNumber((data.todayRegistCount ?? 0) - preTodayRegistCount)}
        </div>
      </>
    );

    // setPreTodayRegistCount(data.todayRegistCount);

    return ret;
  };
  
  const getSuffixText = (addText : string|undefined, newCount:number|undefined, oldCount:number|undefined) => {
    if(addText){
      let odds = (newCount ?? 0) - (oldCount ?? 0);
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
          {addText} {odds > 0 ? <CaretUpOutlined style={{color:'red'}}/> : <CaretDownOutlined  style={{color:'green'}}/>}
                  {utils.formatNumber(odds)}
          </div>
        </>
      );
    }
    else{
      return <></>
    }
  }  
  
  const getCompareText = (addText : string|undefined, newCount:number|undefined, oldCount:number|undefined) => {
    if(addText){
      let odds = (newCount ?? 0) - (oldCount ?? 0);
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
          {addText} {odds > 0 ? <CaretUpOutlined style={{color:'red'}}/> : <CaretDownOutlined  style={{color:'green'}}/>}
                  {utils.formatNumber(odds)}　[{utils.formatNumber((oldCount ?? 0))}]
          </div>
        </>
      );
    }
    else{
      return <></>
    }
  }
  
  const getSuffixTitle = (title : string|undefined, count:number|undefined, total:number|undefined) => {
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
          {title} {utils.formatNumber(count)}{total ? ` / ${utils.formatNumber(total)}`: ""}
          </div>
        </>
      );
  }

  const getTotalTitle=()=>{
    if(activeGenre == 'regist' || activeGenre == 'tot'){
      return "";
    }
    else{
      return (
        <Tag 
        color="blue"
      >
        <b>总数量：{data?.activeTotal}</b>
      </Tag>
      );
    }
  }

  // const getActiveStatText = () => {
  //   if (data == undefined) {
  //     return `0 / 0`;
  //   }
  //   return `${utils.formatNumber(data.activeStat.t7)} / ${utils.formatNumber(
  //     data.activeStat.t30,
  //   )}`;
  // };
  // const getActiveStat3DayText = () => {
  //   if (data == undefined) {
  //     return `--`;
  //   }
  //   return `${utils.formatNumber(data.activeStat.t0)} / ${utils.formatNumber(
  //     data.activeStat.t1,
  //   )} / ${utils.formatNumber(data.activeStat.t2)} / ${utils.formatNumber(
  //     data.activeStat.t3,
  //   )} / ${utils.formatNumber(data.activeStat.t4)} / ${utils.formatNumber(
  //     data.activeStat.t5,
  //   )} / ${utils.formatNumber(data.activeStat.t6)} / ${utils.formatNumber(
  //     data.activeStat.t8,
  //   )}`;
  // };

  let columns: ProColumns<API.UserCountryStat>[] = [
    // {
    //   title: '小时',
    //   hideInTable:  activeGenre != '1h',
    //   dataIndex: 'hour',
    // },
    {
      title: '名称',
      // hideInTable: activeGenre == '1h',
      dataIndex: 'title',
      renderText:(val) =>{
        return <div style={{minWidth:50}}>{val}</div>
      }
    },
    {
      title: '数量',
      dataIndex: 'count',
      render: (_, record) => {
        if((activeGenre == 'regist' || activeGenre == "1h") && (statType == "5" || statType == "6" || statType == "7" || statType == "8" || statType == "9")){
          if(statType == "5"){
            if(activeGenre == 'regist'){
              return (<><b>{record.count}</b><br/>
              {getCompareText("较前日", record.count, record.dayCount)}
              {getCompareText("前二日", record.count, record.dayCount2)}
              {getCompareText("前三日", record.count, record.dayCount3)}
              </>);
            }
            else{
              return (<>{record.count}</>);
            }
          }
          else{
            return <Descriptions size="small" column={12} >
            {
              utils.listHtoV(record.data, 12)?.map((val) =>{
                return <Descriptions.Item label="">{getSuffixTitle(`${val.title}: `,val.count, undefined)}</Descriptions.Item>
              })
            }
          </Descriptions>
          }
        }
        else{
          return utils.formatNumber(record.count);
        }
        
      },
    },
    {
      title: '占比',
      dataIndex: 'count',
      render: (_, record) => {
        return <div style={{minWidth:50}}>{((record.count * 100) / (data?.activeTotal ?? 1)).toFixed(2)}%</div>;
      },
    },
    {
      title: '日活数量',
      hideInTable: (
        activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist'
      ),
      dataIndex: 'dayCount',
      render: (_, record) => {
        return utils.formatNumber(record.dayCount);
      },
    },
    {
      title: '日活占比',
      hideInTable: (
        activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist'
      ),
      dataIndex: 'dayCount',
      render: (_, record) => {
        return `${
          data?.dayTotal
            ? (((record.dayCount ?? 0) * 100) / (data?.dayTotal ?? 1)).toFixed(
                2,
              )
            : 0
        }%`;
      },
    },
    {
      title: '日活/数量比',
      hideInTable: (
        activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist'
      ),
      dataIndex: 'dayCount',
      render: (_, record) => {
        return `${
          data?.dayTotal
            ? (((record.dayCount ?? 0) * 100) / (record?.count ?? 1)).toFixed(2)
            : 0
        }%`;
      },
    },
  ];

  let registColumns: ProColumns<API.RegistStat>[] = [
    {
      title: '日期',
      align: 'center',
      width: 180,
      dataIndex: 'date',
      valueType: 'date',
    },
    {
      title: '合计',
      align: 'center',
      dataIndex: 'total',
      render: (_, record) => {
        return utils.formatNumber(record.total);
      },
    },
    {
      title: '苹果',
      align: 'center',
      dataIndex: 'ios',
      render: (_, record) => {
        return utils.formatNumber(record.ios);
      },
    },
    {
      title: '安卓',
      align: 'center',
      dataIndex: 'android',
      render: (_, record) => {
        return utils.formatNumber(record.android);
      },
    },
    {
      title: '安卓(GooglePlay)',
      align: 'center',
      dataIndex: 'androidGoogle',
      render: (_, record) => {
        return utils.formatNumber(record.androidGoogle);
      },
    },
    {
      title: '安卓(APK)',
      align: 'center',
      dataIndex: 'androidUniversal',
      render: (_, record) => {
        return utils.formatNumber(record.androidUniversal);
      },
    },
    {
      title: '苹果占比',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.ios * 100) / record.total).toFixed(2)}%`;
      },
    },
    {
      title: '安卓占比',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.android * 100) / record.total).toFixed(2)}%`;
      },
    },
    {
      title: 'GooglePlay/安卓',
      dataIndex: 'count',
      width: 130,
      render: (_, record) => {
        return `${((record.androidGoogle * 100) / record.android).toFixed(2)}%`;
      },
    },
    {
      title: 'APK/安卓',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.androidUniversal * 100) / record.android).toFixed(
          2,
        )}%`;
      },
    },
  ];

  

  return (
    <MyContent>
      <Card
        style={{ marginBottom: -48 }}
        tabList={[
          { tab: '统计总览', key: 'tot' },
          { tab: '新增统计', key: 'regist' },
          { tab: '时活跃', key: '1h' },
          { tab: '日活跃', key: '1d' },
          { tab: '周活跃', key: '7d' },
          { tab: '月活跃', key: '30d' },
          { tab: '总用户', key: 'all' },
        ]}        
        loading={myLoading}
        activeTabKey={activeGenre}
        onTabChange={(key: string) => {
          if(myLoading) return;
          setActiveGenre(key);
          if(key != "tot"){
            setCountdownTicks(-1);
          }
          else{
            setMyLoading(true);
            setCountdownTicks(Date.now() + 60000);
          }
          let st = statType;
          // if(key == "1h" && !(statType == "5" || statType == "6" || statType == "7" || statType == "8")) {
          //   st = "5";
          //   setStatType("5");
          // }
          // else if(key != "regist" && !(statType == "1" || statType == "2" || statType == "3")){
          //    st = "1";
          //    setStatType("1");
          // }
          if(key == "1h" || key == "regist"){
            st = "5";
            setStatType("5");
          }
          else{
            st = "1";
            setStatType("1");
          }
          
          loadData({
              genre: key,
              statDay: statDay,
              // statHour: statHour,
              statType: st,
          });
        }}
      >
          <LightFilter style={{ textAlign: 'right', visibility:activeGenre == "tot" ? 'hidden' :'visible',height:activeGenre == "tot" ? 0 : undefined }}>
              <Space>
                <Tabs
                  activeKey={statType}
                  style={{marginTop:-50}}
                  items={
                    activeGenre == 'regist' ? 
                    [
                      { label: '按注册渠道', key: '4' },
                      { label: '按小时统计', key: '5' },
                      { label: '按小时统计国家', key: '6' },
                      { label: '按小时统计平台', key: '7' },
                      { label: '按小时统计版本', key: '8' },
                      { label: '按小时统计渠道', key: '9' },
                      { label: '按国家统计', key: '1' },
                      { label: '按平台统计', key: '2' },
                      { label: '按版本统计', key: '3' },
                    ]
                    :
                    activeGenre == '1h' ? 
                    [
                      { label: '按小时统计', key: '5' },
                      { label: '按小时统计国家', key: '6' },
                      { label: '按小时统计平台', key: '7' },
                      { label: '按小时统计版本', key: '8' },
                    ]
                    :
                    [
                      { label: '按国家统计', key: '1' },
                      { label: '按平台统计', key: '2' },
                      { label: '按版本统计', key: '3' },
                    ]
                  }
                  onChange={(activeKey) => {
                    setStatType(activeKey);
                    loadData(
                      {genre: activeGenre,
                      statDay: statDay,
                      // statHour: statHour,
                      statType: activeKey,}
                      );
                  }}
                ></Tabs>
              </Space>

              <Space
                style={{
                  visibility: activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist' ? 'visible' : 'hidden',
                  width: activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist' ? 500 : 0,
                }}
              >
                <Tabs
                  style={{marginTop:0,marginRight:20}}
                  tabBarExtraContent={
                      <ProFormDatePicker
                        label="统计日期"
                        name="statDate"
                        allowClear={false}
                        initialValue={statDay}
                        fieldProps={{
                          onChange(value, dateString) {
                            setStatDay(value?.format('yyyy-MM-DD'));
                            loadData(
                              {genre: activeGenre,
                              statDay: value?.format('yyyy-MM-DD'),
                              // statHour: statHour,
                              statType: statType,}
                              );
                          },
                        }}
                      />
                  }
                />
                <Tabs
                  activeKey={statDay}
                  style={{marginTop:-15}}
                  items={[
                    { label: '今天', key: moment().format('yyyy-MM-DD') },
                    {
                      label: '昨天',
                      key: moment().add(-1, 'day').format('yyyy-MM-DD'),
                    },
                    {
                      label: '前天',
                      key: moment().add(-2, 'day').format('yyyy-MM-DD'),
                    },
                  ]}
                  onChange={(activeKey) => {
                    // console.log(activeKey);
                    setStatDay(activeKey);
                    loadData(
                      {genre: activeGenre,
                      statDay: activeKey,
                      // statHour: statHour,
                      statType: statType,}
                      );
                  }}
                />
              </Space>

          </LightFilter>
      </Card>
      
      <Card
      loading={myLoading}
      >    
        <Tabs
          tabBarExtraContent={
            <Space style={{marginBottom:-20}}>
              <Countdown
                title=""
                key="cdRefresh"
                value={countdownTicks}
                format="s"
                prefix=""
                suffix="秒后刷新"
                valueStyle={{
                  fontSize: 14,
                  color: 'gray',
                }}              
                onFinish={reload}
              />
              <ReloadOutlined onClick={reload} />
            </Space>
          }
          style={{
            marginBottom: 20,
            visibility: activeGenre == 'tot' ? 'visible' : 'hidden',
            height: activeGenre == 'tot' ? undefined : 0,
          }}
        >
        <TabPane key="tab1" tab="用户">          
        <Row gutter={16}>
          <Col span={2}>
            <Statistic
              title="当前在线"
              value={utils.formatNumber(data?.currentConnCount)}
            />
          </Col>
          {data?.registDetails && data?.registDetails?.length > 0 && data?.registDetails[0].key?.indexOf('今日') != -1 ?
          <Col span={2}>
            <Statistic
              title={data?.registDetails[0].key}
              value={utils.formatNumber(data?.registDetails[0].value)}
              suffix={getMinuteAddText()}
              // suffix={preTodayRegistCount ? <div style={{ fontSize: 14, color: 'gray' }}>+{utils.formatNumber((data.todayRegistCount ?? 0) - (preTodayRegistCount ?? 0))}</div> : ""}
              // suffix={addTodayRegistCount ? <div style={{ fontSize: 14, color: 'gray' }}>+{utils.formatNumber(addTodayRegistCount)}</div> : ""}
            />
          </Col>
          :""}

          <Col span={2}>
            <Statistic
              title="7日最大在线"
              value={utils.formatNumber(data?.maxOnline?.day7?.count)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>{data?.maxOnline?.day7?.date}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="总用户"
              value={utils.formatNumber(data?.totalDbUser)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="统计总用户"
              value={utils.formatNumber(data?.totalUser)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较昨日',data?.totalUser,data?.totalUser2)}
            />
          </Col>
          <Col span={6}>
            <Statistic
              title="VIP总用户"
              value={utils.formatNumber(data?.totalVip)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较昨日',data?.totalVip,data?.totalVip2)}
            />
          </Col>
        </Row>

        <Row gutter={16} style={{marginTop:40}}>
        <ProCard
          title="最大在线"
          headStyle={{backgroundColor:'#fafafa'}}
          headerBordered
          split='vertical'
          bordered
        >
          <ProCard colSpan="10%">
            <Statistic
              title="7日最大在线"
              value={utils.formatNumber(data?.maxOnline?.day7?.count)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>{data?.maxOnline?.day7?.date}</div>}
            />
            <Statistic
              title="30日最大在线"
              value={utils.formatNumber(data?.maxOnline?.day30?.count)}
              style={{marginTop:30}}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>{data?.maxOnline?.day30?.date}</div>}
            />
          </ProCard>
          <ProCard colSpan="90%">
            <LineChart data={data?.maxOnline?.days ?? []} xfield='date' yfield='count' height={200} />
          </ProCard>
        </ProCard>
        </Row>

        <Row gutter={16} style={{marginTop:40}}>
          <ProCard
            title="VIP国家及渠道分布"
            headStyle={{backgroundColor:'#fafafa'}}
            headerBordered
            split='vertical'
            bordered
          >
          <ProCard colSpan="10%">
            <Statistic
              title="VIP总用户"
              value={utils.formatNumber(data?.totalVip)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较昨日',data?.totalVip,data?.totalVip2)}
            />
          </ProCard>
          <ProCard colSpan="90%">
            <Statistic
              title=""
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={
                <Descriptions size="small" column={4} contentStyle={{ fontSize: 14, color: '#666'}}>
                  {/* {
                    utils.listHtoV(data?.vipStat, 10)?.map((val) =>{
                      return <Descriptions.Item label="">{getSuffixTitle(`${val.key}: `,val.value, val.subValue)}</Descriptions.Item>
                    })
                  } */}
                  {
                    utils.listHtoV(data?.vipStat, 4)?.map((val) =>{
                      return <Descriptions.Item label="">{val.key}: {val.value}/{val.subValue} 
                      <div style={{color:"#aaa"}}>&nbsp;{val.exChannels.map((v2:API.UserStatRefModel)=> {
                        return `${v2.key}:${v2.value}/${v2.subValue} `}
                        )}</div></Descriptions.Item>
                    })
                  }
                </Descriptions>
              }
            />
            </ProCard>
          </ProCard>
        </Row>
        </TabPane>
        <TabPane key="tab2" tab="新增">
        {data?.registDetails?.map((reg)=>{
          return(
            <Row gutter={16} style={{marginTop:40}}>
              <Col span={2}>
                <Statistic
                  title={reg.key}
                  value={utils.formatNumber(reg.value)}
                  // suffix={reg.key?.indexOf('今日') != -1 ? getMinuteAddText() : ""}
                />
                {/* 
                <Statistic
                  title="7日最大在线"
                  value={utils.formatNumber(data?.maxOnline?.day7?.count)}
                /> */}
                {/* <Statistic
                  title="上一小时增加"
                  value={utils.formatNumber(data?.maxOnline?.day7?.count)}
                  style={{marginTop:10}}
                  // prefix={<div style={{ fontSize: 14, color: 'gray' }}>上一小时增加</div>}
                /> */}
              </Col>
              <Col span={2}>
                <Statistic
                  title="渠道分布"
                  value={""}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={                
                    <Descriptions size="small" column={1}>
                      {
                        reg.channels?.map((val) =>{
                          return <Descriptions.Item label="">{getSuffixTitle(`${val.key}: `,val.value, undefined)}</Descriptions.Item>
                        })
                      }
                    </Descriptions>
                  }
                />
              </Col>
              <Col span={12}>
                <Statistic
                  title="国家分布"
                  value={""}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={
                    <Descriptions size="small" column={7} >
                      {
                        utils.listHtoV(reg.countrys, 7)?.map((val) =>{
                          return <Descriptions.Item label="">{getSuffixTitle(`${val.key}: `,val.value, undefined)}</Descriptions.Item>
                        })
                      }
                    </Descriptions>
                  }
                />
              </Col>
            </Row>
          );
        })}          
        </TabPane>
        <TabPane key="tab3" tab="活跃">
          
        <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title="今日活跃"
              value={utils.formatNumber(data?.activeStat.t0)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="昨日活跃"
              value={utils.formatNumber(data?.activeStat.t1)}
              // suffix={getSuffixText('较上日',data?.activeStat.t1,data?.activeStat.t2)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t1,data?.activeStat.t2)}<br/>{getSuffixText('较上周',data?.activeStat.t1,data?.activeStat.t8)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="前日活跃"
              value={utils.formatNumber(data?.activeStat.t2)}
              // suffix={getSuffixText('较上日',data?.activeStat.t2,data?.activeStat.t3)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t2,data?.activeStat.t3)}<br/>{getSuffixText('较上周',data?.activeStat.t2,data?.activeStat.t9)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="三天前活跃"
              value={utils.formatNumber(data?.activeStat.t3)}
              // suffix={getSuffixText('较上日',data?.activeStat.t3,data?.activeStat.t4)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t3,data?.activeStat.t4)}<br/>{getSuffixText('较上周',data?.activeStat.t3,data?.activeStat.t10)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="四天前活跃"
              value={utils.formatNumber(data?.activeStat.t4)}
              // suffix={getSuffixText('较上日',data?.activeStat.t4,data?.activeStat.t5)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t4,data?.activeStat.t5)}<br/>{getSuffixText('较上周',data?.activeStat.t4,data?.activeStat.t11)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="五天前活跃"
              value={utils.formatNumber(data?.activeStat.t5)}
              // suffix={getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}<br/>{getSuffixText('较上周',data?.activeStat.t5,data?.activeStat.t12)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="六天前活跃"
              value={utils.formatNumber(data?.activeStat.t6)}
              // suffix={getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t6,data?.activeStat.t7)}<br/>{getSuffixText('较上周',data?.activeStat.t6,data?.activeStat.t13)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="七天前活跃"
              value={utils.formatNumber(data?.activeStat.t7)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t7,data?.activeStat.t8)}<br/>{getSuffixText('较上周',data?.activeStat.t7,data?.activeStat.t14)}</>}
            />
          </Col>
        </Row>

        
        <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title="本周活跃"
              value={utils.formatNumber(data?.weekCount)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="上周活跃"
              value={utils.formatNumber(data?.weekCount2)}
              // suffix={getSuffixText('较上周',data?.weekCount2,data?.weekCount3)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上周',data?.weekCount2,data?.weekCount3)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="二周前活跃"
              value={utils.formatNumber(data?.weekCount3)}
              // suffix={getSuffixText('较上周',data?.weekCount3,data?.weekCount4)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上周',data?.weekCount3,data?.weekCount4)}
            />
          </Col>
          <Col span={10}>
            <Statistic
              title="三周前活跃"
              value={utils.formatNumber(data?.weekCount4)}
            />
          </Col>
        </Row>

        
        <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title="本月活跃"
              value={utils.formatNumber(data?.monthCount)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="上月活跃"
              value={utils.formatNumber(data?.monthCount2)}
              // suffix={getSuffixText('较上月',data?.monthCount2,data?.monthCount3)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上月',data?.monthCount2,data?.monthCount3)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="二月前活跃"
              value={utils.formatNumber(data?.monthCount3)}
              // suffix={getSuffixText('较上月',data?.monthCount3,data?.monthCount4)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上月',data?.monthCount3,data?.monthCount4)}
            />
          </Col>
          <Col span={10}>
            <Statistic
              title="三月前活跃"
              value={utils.formatNumber(data?.monthCount4)}
            />
          </Col>
        </Row>

        </TabPane>
        <TabPane key="tab4" tab="收入">

        {data?.saleDays?.map((sale)=>{
          return(
          <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title={sale.title}
              value={utils.formatNumber( ((sale.amount ?? 0) + (sale.renewAmount ?? 0) + (sale.siteAmount ?? 0)).toFixed(2) )}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.count ?? 0) + (sale.renewCount ?? 0) + (sale.siteCount ?? 0)}</div>}
              //<br/>新增/续订 {(sale.count ?? 0) + (sale.siteCount ?? 0)}/{sale.renewCount}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="新增总计"
              value={utils.formatNumber(((sale.amount ?? 0) + (sale.siteAmount ?? 0)).toFixed(2))}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.count ?? 0) +(sale.siteCount ?? 0)}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="官网"
              value={utils.formatNumber(sale.siteAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.siteCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="AppStore新增"
              value={utils.formatNumber(sale.appleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.appleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="GooglePlay新增"
              value={utils.formatNumber(sale.googleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.googleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="续订总计"
              value={utils.formatNumber(((sale.renewAmount ?? 0)).toFixed(2))}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.renewCount ?? 0) }</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="AppStore续订"
              value={utils.formatNumber(sale.renewAppleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.renewAppleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="GooglePlay续订"
              value={utils.formatNumber(sale.renewGoogleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.renewGoogleCount}</div>}
            />
          </Col>

        </Row>);
        })}

          
        </TabPane>
        </Tabs>
      </Card>

      <ProTable
        headerTitle={getTotalTitle()}
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        style={{
          visibility: (activeGenre == 'regist' && statType == "4") || activeGenre == 'tot' ? 'hidden' : 'visible',
          height: (activeGenre == 'regist' && statType == "4") || activeGenre == 'tot' ? 0 : undefined,
        }}
        // loading={myLoading}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        search={false}
        pagination={false}
        dataSource={data?.data}
      />

      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        // loading={myLoading}
        style={{
          visibility: (activeGenre == 'regist' && statType == "4") ? 'visible' : 'hidden',
          height: (activeGenre == 'regist' && statType == "4") ? undefined : 0,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={registColumns}
        search={false}
        pagination={false}
        dataSource={data?.registStat}
      />

    </MyContent>
  );
};

export default List;
